<template>
  <div id="mainContent">
    <!-- <div class="abstract-header"> -->
      <el-card class="box-card" style="display:inline-block;width:49.5%;">
        <div slot="header" class="clearfix" @click="gotoBacklog" style="cursor: pointer;">
          <span>我的待办</span>
        </div>
        <div class="notifaction-block" style="background-color:#8c97cb;">
          您有六条待办事项
        </div>
      </el-card>
      <el-card class="box-card" style="display:inline-block;width:49.5%;">
        <div slot="header" class="clearfix" @click="gotoTaskStatistical" style="cursor: pointer;">
          <span>任务统计</span>
        </div>
        <div class="notifaction-block" style="background-color:#628edb;">
          您有三条任务统计
        </div>
      </el-card>
      <el-card class="box-card" style="display:inline-block;width:49.5%;">
        <div slot="header" class="clearfix" @click="gotoTaskQuery" style="cursor: pointer;">
          <span>任务查询</span>
        </div>
        <div class="notifaction-block" style="background-color:#628edb;">
          您有三条任务查询 
        </div>
      </el-card>
      <el-card class="box-card" style="display:inline-block;width:49.5%;">
        <div slot="header" class="clearfix" @click="gotoSummarySheet" style="cursor: pointer;">
          <span>汇总统计表</span>
        </div>
        <div class="notifaction-block" style="background-color:#8c97cb;">
          您有六条汇总统计表
        </div>
      </el-card>
  </div>
</template>

<script>
  export default {
    name: 'abstract',
    methods: {
      setNowClock() {
        setInterval(() => this.clockNow = new Date().toLocaleString(), 1000);
      },
      // 跳转至我的待办
      gotoBacklog() {
        this.$router.push({
          path:'/main/backlog',
        });
      },
      // 跳转至任务统计
      gotoTaskStatistical() {
        this.$router.push({
          path:'/main/task-statistical',
        });
      },
      // 跳转至任务查询
      gotoTaskQuery() {
        this.$router.push({
          path:'/main/task-query',
        });
      },
      // 跳转至汇总统计表
      gotoSummarySheet() {
        this.$router.push({
          path:'/main/summary-sheet',
        });
      }
    }
  }

</script>

<style scoped>
  .abstract-header {
    display: flex;
    justify-content: space-between;
  }

  .notifaction-block {
    border-radius: 5px;
    padding: 20px;
    color: white;
    font-size: 18px;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: auto;
  } 

</style>
